<script setup lang="ts">
type Props = {
  title?: string;
  path?: string;
  cls?: string;
  list?: { rendered?: string; time?: string }[];
};
let prop = withDefaults(defineProps<Props>(), {
  title: "典型维权案例",
  path: "/",
  cls: "",
  list: () => [],
});

const emits = defineEmits<{
  (e: "open", value: string): void;
}>();
</script>

<template>
  <div class="cases" :class="cls">
    <!-- 头部维权案列 -->
    <div class="headres">
      <span class="line"></span>
      <p class="title">{{ title }}</p>
      <span class="more" @click.stop="emits('open', path)"
        >查看更多 &#xed1e;</span
      >
    </div>

    <!-- 案例内容 -->
    <ul class="contents">
      <li class="v" v-for="(v, k) of list" :key="k">
        <span class="dian">&#xec1e;</span>
        <p class="item">{{ v.rendered }}</p>
        <span class="time">{{ v.time?.substr(5) }}</span>
      </li>
    </ul>
  </div>
</template>

<style scoped lang="scss">
.cls {
  grid-column-start: span 2;
}

.cases {
  width: 100%;
  height: 100%;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  padding: 0px 16px 16px 16px;
  color: #333;
}

.headres {
  @include flexCenter;
  border-bottom: 1px solid#D8D8D8;
  padding: 16px 0px;
}

// 竖线
.line {
  width: 3px;
  height: 16px;
  background: #2163e0;
  border-radius: 2px;
}
.title {
  padding-left: 10px;
  flex: 1;
  font-size: 16px;
  font-weight: bold;
}
.more {
  color: #90949e;
  cursor: pointer;
  font-size: 12px;
}

// 案例内容
.contents {
  padding: 16px 0px;
}

// 每层内容
.v {
  width: 100%;
  @include flexBetweenCenter;
  color: #333333;
  cursor: pointer;
  padding: 8px 0px;
}

.item {
  flex: 1;
  // 超出一行文本显示三个小点
  @include transcendLine(1);
  margin-right: 16px;
  font-size: 14px;
}

// 内容前面的小点
.dian {
  flex: 0 0 auto;
  font-size: 12px;
  display: inline-block;
  transform: scale(0.5);
  color: #333333;
  margin-right: 6px;
}

.time {
  font-size: 14px;
  color: #90949e;
}
</style>
